<template>
  <div id="container">
    <el-tree
      :data="treeData"
      :props="{children: 'childList', label: 'orgName'}"
      @node-click="select"
      :default-expand-all="true"
      :highlight-current="true"
      :expand-on-click-node="false"
      :current-node-key="currentNode"
    ></el-tree>
  </div>
</template>

<script>
  export default {
    name: 'OrgsTree',
    data: function() {
      return {
        treeData:[],
      }
    },
    props: {
      currentNode: String,
    },
    created() {
      this.getTagTree();
    },
    mounted() {
      this.$on("update", ()=>{
        this.getTagTree();
      });
    },
    methods: {
      getTagTree() {
        this.$api.orgsTree()
          .then(res => {
            this.treeData = res;
          })
      },
      select(o, n, e) {
        this.$emit("select", {id: o.id, orgName: o.orgName});
      }
    }
  }
</script>

<style scoped>
  #container {
    width:100%;
    height:100%;
    padding: 10px;
  }
</style>
